<template>
  <div class="main">
    <div class="left-menu">
      <Menu
        @on-select="onSelect"
        style="width:100%;height:100%;"
        :open-names="openedMenus"
        :active-name="activeName"
      >
        <Submenu v-for="(item, i) in menuData" :key="i" :name="item.name">
          <template slot="title">
            <Icon :type="item.icon" />
            {{ item.name }}
          </template>
          <MenuItem
            v-for="(data, i) in item.children"
            :key="i"
            :name="data.router"
            >{{ data.name }}</MenuItem
          >
        </Submenu>
      </Menu>
    </div>
    <div class="right-con">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      getOpenName: "",
      openedMenus: ["模板导出"],
      activeName: "QiSuZhuang",
      menuData: [
        // {
        //   name: "用户管理",
        //   type: "menu",
        //   icon: "ios-paper",
        //   children: [
        //     {
        //       name: "人员管理",
        //       router: "UserManager",
        //       type: "item"
        //     }
        //   ]
        // },
        {
          name: "模板导出",
          type: "menu",
          icon: "ios-paper",
          children: [
            {
              name: "起诉状",
              router: "QiSuZhuang",
              type: "item"
            },
            {
              name: "诉讼材料",
              router: "SSCL",
              type: "item"
            },
            {
              name: "剧本杀",
              router: "Baidu",
              type: "item"
            },
            {
              name: "租房",
              router: "Ziru",
              type: "item"
            }
          ]
        }
      ]
    };
  },

  methods: {
    onSelect(name) {
      this.$router.push({
        name
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .left-menu {
    width: 15rem;
    height: 100%;
    display: inline-block;
  }
  .right-con {
    width: calc(100% - 15rem);
    height: 100%;
    float: right;
    position: relative;
  }
}
</style>
